<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%@ include file="../../include.jsp" %>
<%@ include file="../../mobilehead_inc.jsp" %>
<title>订餐首页</title>
<script type="text/javascript">
	$(document).ready(function(){
		 $.ajax({
		        url: '${ctx}/mobile/getCommodityCategory',
		        dataType: "json",
		        async: true,
		        data:{
		        	page:1,
		        	rows:5
		        },
		        success: function (result) {
		        	
		        		console.log(result);		        		
		        },
		        error: function () {
		        	
		        }
		        
		    }); 			
	});
	//获得商品和公告
	/* $(document).on('pageinit', function () {			  
	    $.ajax({
	        url: '${ctx}/mobile/getCommodity',
	        dataType: "json",
	        async: true,
	        success: function (result) {		        	
	        	if(result.obj != null){
	        		console.log(result);
	        	}

	        }
	        
	    });    
	}); */
</script>
<script>
		//获得商品和公告
		$(document).on('pageinit', function () {			  
		    $.ajax({
		        url: '${ctx}/mobile/getCommodity',
		        dataType: "json",
		        async: true,
		        success: function (result) {		        	
		        	if(result.obj != null){
		        		console.log(result);
		        		
		        		
		        		
		        		/* var content = new Array();
		        		for(var i=0;i<result.obj.length;i++){
		        			content[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].commodityId+"' target='_self' class=''><img id='imgs'  src='"+result.obj[i].photo+"'><h3 class='am-gallery-title'>"+result.obj[i].names+"</h3><p><div class='am-gallery-desc'>剩"+result.obj[i].number+"件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=\"5\" color=\"orange\">￥"+result.obj[i].price+"</font><del>￥"+result.obj[i].nativePrice+"</del></div></p></a></div></li> ";
			        	}
		        		$("#queryCom").empty();
		        		$("#queryCom").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\"><h2><span></span><font color=red>热销餐品</font></h2>"+content.join(" ")+"</ul>");
		        		
		        		 if(result.rows != null){
			        		var contents = new Array();
			        		var pubTime;
			        		var depName;
			        		for(var i=0;i<result.rows.length;i++){
			        			pubTime = formatDate(result.rows[i].pubTime);
			        			if(result.rows[i].sysDepartment != null){
			        				depName = result.rows[i].sysDepartment.depName
			        			}else{
			        				depName = "平台";
			        			} 
			        			contents[i] = "<div class='am-popup-bd'>"+(i+1)+"&nbsp;&nbsp;"+result.rows[i].content+"<br><p class='am-kai'><small>----来自&nbsp;&nbsp;"+depName+"&nbsp;&nbsp;"+pubTime+"</small></p></div><hr data-am-widget=\"divider\" style=\"\" class=\"am-divider am-divider-default\" />";
			        			} 
			        		
			        		$("#ajax-popup").append(contents.join(" "));
			        	} */
		        		
		        		
			        	
			        	
		        	}
  
		        },
		        error: function (request, error) {
		        	$("#queryCom").append("<div class='am-alert'> 暂时没有推荐哦 ！ </div>");
		        }
		        
		    });    
		});
		
		
		//格式化日期
		function formatDate (strTime) {
		    var date = new Date(strTime);
		    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
		}
		 
		 function checkSubmit()
		 {
			 var phone = $("#feed_phone").val();
			 var sub_btn = document.getElementById('sub_butt');
		 	 //var flag = $('input:radio[name="radio"]:checked').val();
		 	 var content =  $("#feed_content").val();
		 	content = encodeURI(encodeURI(content)); 
		   
		   if (phone == null || phone == "" ) {
			   	$("#alertmsg").empty();
		 		 $("#alertmsg").append("<div class='am-alert am-alert-success' am-alert-alert><button type='button' class='am-close'>&times;</button><p>请填写手机号！</p></div>");
		            document.myform.phone.focus();
		            return false;
		     }
		   sub_btn.disabled=true;
		 	setTimeout(function (){
		 		sub_btn.disabled=false;	 
			},60000);
		   
		   var $modal = $('#sub-pro');
           var url = "${ctx}/mobile/feedBack?phone="+phone+"&content="+content;
           $.getJSON(url, function(json){
               if(json.success==0)
               {
              	
              	 $("#alertmsg").empty();
              	 $modal.modal('close');
              	 document.getElementById("sub_target").click();   
               }
               else
               {
              	 $("#alertmsg").empty();
			 		 $("#alertmsg").append("<div class='am-alert'> "+json.msg+" </div>");
               }
               $('#myform')[0].reset();
               
             //  $(':input','#myform') 
              // .not(':button, :submit, :reset, :hidden') 
              // .val('') 
              // .removeAttr('checked') 
              // .removeAttr('selected');
           });
		           return true;  
		 }
		 
		 
		 function isNull( str ){
				if ( str == "" ) return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			}
		 
		var scontent;
		var pageArray = [];
		var allCount;//获取总记录条数
		var allPage;//计算出总共页数
		var currentPage = 1;//设置当前页
		var rows = 10;//设置每页列数
		
		function searchComm(){
			scontent =  encodeURI(encodeURI($("#search-content").val()));
			if(scontent == null || scontent == "" || isNull( scontent )){
				alert("请输入搜索条件！");
			}else{
				loadMsg(1);
			}
			
		}
		
		function loadMsg(page){
			currentPage = page;
			$.ajax({
		        url: '${ctx}/mobile/searchComm?content='+scontent+'&page='+page+'&rows='+rows+'',
		        dataType: "json",
		        async: true,
		        success: function (result) {
		        	
		        	//分页相关
		        	allCount =  result.rows;
/* 		        	allPage  = Math.ceil(allCount/rows);//总页数 */
		        	
		        	var upPage;//上一页
		        	if(currentPage-1 <= 0){
		        		upPage = 1;
		        	}else{
		        		upPage = currentPage-1;
		        	}
		        	var downPage;//下一页
		        	if(currentPage+1 > allPage){
		        		downPage = allPage;
		        	}else{
		        		downPage = currentPage+1;
		        	}
		        	$("#top_count_num").empty();
		        	$("#count_num").empty();
		        	var td_need = " <br/> <ul data-am-widget='pagination' class='am-pagination am-pagination-default' >"+
		        	" <li class='am-pagination-first'> <a href='#' onclick='loadMsg(1);' target='_self' class=''> 首页</a> </li>"+		
		        	" <li class='am-pagination-prev'> <a href='#' onclick='loadMsg("+upPage+");' target='_self' class=''>上页</a> </li>"+
		        	"<li class='am-pagination-next'> <a href='#' target='_self' onclick='loadMsg("+downPage+");' class=''>下页</a> </li>"+
		        	"<li class='am-pagination-last'> <a href='#'  target='_self' onclick='loadMsg("+allPage+");' class=''>末页</a> </li>  </ul>";
		        	$("#top_count_num").append(td_need);
		        	//$("#count_num").append(td_need);
		        	
		        	
		        	var down_need_num = "  <ul data-am-widget='pagination' class='am-pagination am-pagination-default' > </ul>";
		        	$("#count_num").append(down_need_num);
		        	for(var i=1;i<=allPage;i++){
		        		pageArray[i] = i;
		        		ulNum = "<li class=''><a href='#' class='am-active' onclick='loadMsg("+pageArray[i]+");' target='_self' >"+pageArray[i]+"</a></li>";
		    			$("#count_num ul").append(ulNum);
		    		}

		        	if(result.obj != null && result.obj.length > 0){
		        		var contentss = new Array();
		        		for(var i=0;i<result.obj.length;i++){
		        			contentss[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].commodityId+"' target='_self' class=''><img id='imgs'   src='"+result.obj[i].photo+"'><div class='am-gallery-title'> <h3>"+result.obj[i].names+"</h3></div><div class='am-gallery-desc'><p>剩"+result.obj[i].number+"件&nbsp;&nbsp;售价"+result.obj[i].price+"</p></div></a></li> ";
			        	}
		        		$("#my-search-content").empty();
		        		$("#my-search-content").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\"  ><h2><span></span>搜索结果</h2>"+contentss.join(" ")+"</ul>");
		        		
		        		
		        	}else{
		        		$("#my-search-content").empty();
		        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
		        	}
		
		        },
		        error: function (request, error) {
		        	$("#my-search-content").empty();
	        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
		        }
		        
		    });
		}
</script>
<style type="text/css">
#queryCom img {
   width:40%;
   height:150px;
   border: 5px;
   margin: 5px;
   border-color: gray
}
#mydiv{
	border: 1px solid white;
	text-align: center;
	padding: 2px
}
#myform{
	margin-left: 5px;
	margin-right: 5px;
	}
.notice{
width:100%;
height:25px;

}
.notice-a{
margin-left:2%;
position:absolute;
width:20%;
}
.notice-c{
margin-left:18%;
display:block;
width:78%;
height:25px;

}
</style>

</head>
<!-- background:#9999FF; -->
<!-- style="background:#FFFFCC" -->
<body>
	<header data-am-widget="header" class="am-header am-header-default joan-head" style="background:#9999FF;position:fixed;z-index:1001;margin-bottom;" >
	     <%--  <div class="gm-head-left">
	          <a href="#left-link" class=""><i class="am-icon-map-marker"></i>${location }</a>
	      </div>  --%>
	      <div class="gm-head-left">
	         <a href="${ctx}/mobile/store" target="_self" >商品列表</a> 
	      </div> 
	      <div class="gm-head-search"  style="margin-top:7px;" >
	         <a data-am-modal="{target:'#my-popup-search'}" href="#"  ><input type="text" placeholder="搜索餐品名称"><i class="am-icon-search" style="margin-top:5px" ></i></a>
	      </div>
	 
	     <div class="gm-head-right" style="">
	         <a href="${ctx}/mobile/detail" target="_self" >修改资料</a> 
	     </div>
</header>
<div data-am-widget="slider" class="am-slider am-slider-d2" data-am-slider='{&quot;directionNav&quot;:false}' style="background:#FFFFCC;padding-top:49px;">
  		<ul class="am-slides">
	      <li>
	        	<img src="/images/1.jpg">
	      </li>
	      <li>
	        	<img src="/images/2.jpg">  
	      </li>
	      <li>
	      	<img src="/images/4.jpg">
	      </li>
	      <li>
	        	<img src="/images/2.jpg">
	      </li>
 	 </ul>
</div>

 <!-- 公告走马灯 -->  
 <div  class="notice" style="background:#FFFFCC" >
	<div class="notice-a">公告：</div> 
	<div class="notice-c">
    	<marquee  direction="right"  loop="-1" scrollamount="10"  align="right" >
    		<font color=red>新店开张  大优惠  ！！！</font>
        </marquee>
    </div>	  	         	
</div>

<!-- 动态显示商品 -->
	<div id="queryCom" class="product" style="background:#FFFFCC;margin-top: 10px;">
	<div align="center"><i class="am-icon-spinner am-icon-spin"></i></div>
 	</div>
 	<!--搜索  -->
	<div class="am-popup" id="my-popup-search" style="background:#FFFFCC">
		<span data-am-modal-close class="am-close">&times;</span>
		<div class="am-popup-inner" id="ajax-popup">
			<div class="am-popup-hd">
				<h4 class="am-popup-title">搜索</h4>
				<span data-am-modal-close class="am-close">&times;</span>
				<div><br/>
			<form class="am-form-inline" role="form">
				<div class="am-form-group">
					<input type="text" size="50" id="search-content" maxlength="10" class="am-form-field" placeholder="搜索餐品">
				</div>
				&nbsp;&nbsp;<button type="button" onclick="searchComm();" class="am-btn am-btn-success">搜索</button>
			</form>
			</div>
			</div>
			
			<div>
				
				
				
				<div id="my-search-content"></div>
				
				<!-- 分页 -->
				<div id="count_num"></div>
			</div>
		</div>
	</div>

<!-- 底部 -->
 <jsp:include page="bottombar.jsp">
	    <jsp:param name="index" value="1"/>
  </jsp:include> 
<!--   <div data-am-widget="navbar" class="am-navbar  am-navbar-default gm-foot"   style="background-color:#9999FF;" >
		<ul class="am-navbar-nav am-cf am-avg-sm-4">
		<li ><a href="/mobile/main" target="_self" class="curr"> <span class="am-icon-home"></span> <span class="am-navbar-label">首页</span> </a></li>
		<li> <a href="/mobile/myorder" target="_self" class="curr"><span class="am-icon-th-large"></span> <span class="am-navbar-label">订单</span> </a> </li>
		<li > <a href="/mobile/goperson" target="_self" class="curr"> <span class="am-icon-user"></span> <span class="am-navbar-label">我的</span> </a> </li>
	</ul> 
  </div> --> 
</body>
</html>